<template>
	<view v-if="display" class="dialog-container">
		<view class="dialog-mask" @click="clickHide"></view>
		<view class="shell-main">			
			<text class="dialog-title">{{title}}</text>
			<slot></slot>
			<text class="dialog-btn" @click.stop="clickConfirm">{{confirmText}}</text>
	  </view>
    </view>
</template>

<script>
	export default {
		name: "dialog-shell",
		props: {
		    title: {
		        type: String,
		        required: true,
		        validator: function(value) {
		            return value && value.length > 2;
		        }
		    },
		    confirmText: {
			  
				type: String,
		        default: "确定",
		        required: false,
		        validator: function(value) {
		            return value && value.length > 2;
		        },
				      
		    }
		},
	data() {
			return {
				display: false
			};
		},
		methods: {
			show(){
				this.display = true
			},
			clickConfirm(){
				this.display = false
				//引用页面或父组件要做的事,由父组件注入的事件逻辑
				this.$emit("confirm")
			},
			clickHide(){
				this.display = false
			}
		}
	}
</script>

<style>
@import url("dialog-shell.css");
</style>